<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格与表单标签实验</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #f5f5f5; }
        .form-group { margin: 15px 0; }
        label { display: block; margin-bottom: 5px; }
        input, select, textarea { width: 300px; padding: 8px; }
    </style>
</head>
<body>
    <h1>HTML表格与表单标签实验</h1>

    <!-- 一、表格标签部分：结构化展示数据 -->
    <h2>1. 表格应用（展示结构化数据）</h2>

    <!-- 1.1 基础表格：thead（表头）、tbody（表体）分组，数据层级清晰 -->
    <h3>基础员工信息表</h3>
    <table>
        <!-- thead：表头区域，包含列标题，语义上区分“标题”与“数据” -->
        <thead>
            <tr> <!-- tr：表格行，包含一个或多个th/td -->
                <th>员工ID</th> <!-- th：表头单元格，默认加粗居中，语义为“列标题” -->
                <th>姓名</th>
                <th>部门</th>
                <th>入职日期</th>
            </tr>
        </thead>
        <!-- tbody：表体区域，包含核心数据行，可独立控制样式或动态加载 -->
        <tbody>
            <tr>
                <td>001</td> <!-- td：数据单元格，存放具体数据 -->
                <td>张三</td>
                <td>技术部</td>
                <td>2023-01-15</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>产品部</td>
                <td>2023-03-20</td>
            </tr>
        </tbody>
    </table>

    <!-- 1.2 合并单元格表格：colspan（横向合并）、rowspan（纵向合并） -->
    <h3>带合并单元格的成绩表</h3>
    <table>
        <thead>
            <!-- colspan="4"：当前单元格横向合并4列（覆盖4个列位置） -->
            <tr><th colspan="4">2023年第二季度班级成绩表</th></tr>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>平均分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>88</td>
                <td>95</td>
                <td>91.5</td>
            </tr>
            <tr>
                <!-- rowspan="2"：当前单元格纵向合并2行（覆盖2个行位置） -->
                <td rowspan="2">小红</td>
                <td>92</td>
                <td>89</td>
                <td>90.5</td>
            </tr>
            <tr>
                <!-- 因上方td合并2行，本行需减少1个td（避免列数错乱） -->
                <td>94</td>
                <td>96</td>
                <td>95</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- tfoot：表脚区域，存放汇总数据，语义上区分“数据”与“汇总” -->
            <tr><th colspan="3">班级平均分</th><td>92.1</td></tr>
        </tfoot>
    </table>

    <!-- 二、表单标签部分：收集用户输入 -->
    <h2>2. 表单应用（收集用户输入）</h2>
    <!-- form标签：表单容器，action（提交目标URL）、method（提交方式：get/post） -->
    <form action="#" method="post">
        <!-- 2.1 文本输入控件 -->
        <div class="form-group">
            <!-- label标签：与输入框关联（for=输入框id），点击标签聚焦输入框，提升可访问性 -->
            <label for="username">用户名：</label>
            <!-- type="text"：单行文本输入框，required属性表示“必填”，提交前校验 -->
            <input type="text" id="username" name="username" required placeholder="请输入3-10位用户名">
        </div>

        <div class="form-group">
            <label for="email">邮箱：</label>
            <!-- type="email"：邮箱输入框，自带格式校验（需包含@），无需额外代码 -->
            <input type="email" id="email" name="email" required placeholder="请输入有效邮箱">
        </div>

        <!-- 2.2 数值输入控件 -->
        <div class="form-group">
            <label for="age">年龄：</label>
            <!-- type="number"：数字输入框，min/max限制范围，step控制步长 -->
            <input type="number" id="age" name="age" min="18" max="60" step="1" placeholder="请输入18-60之间的年龄">
        </div>

        <!-- 2.3 单选/复选控件：name属性控制分组（同组单选互斥，复选可多选） -->
        <div class="form-group">
            <label>性别（单选）：</label>
            <!-- type="radio"：单选按钮，value为提交时的实际值 -->
            <input type="radio" id="male" name="gender" value="male" checked> <!-- checked：默认选中 -->
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </div>

        <div class="form-group">
            <label>兴趣爱好（复选）：</label>
            <!-- type="checkbox"：复选框，可多选 -->
            <input type="checkbox" id="reading" name="hobby" value="reading">
            <label for="reading">阅读</label>
            <input type="checkbox" id="sports" name="hobby" value="sports">
            <label for="sports">运动</label>
            <input type="checkbox" id="coding" name="hobby" value="coding" checked>
            <label for="coding">编程</label>
        </div>

        <!-- 2.4 下拉选择控件 -->
        <div class="form-group">
            <label for="education">最高学历：</label>
            <!-- select：下拉选择框，option为选项，value为提交值 -->
            <select id="education" name="education" required>
                <option value="">请选择（必填）</option> <!-- 空值选项，提示用户选择 -->
                <option value="highschool">高中</option>
                <option value="college">专科</option>
                <option value="bachelor" selected>本科</option> <!-- selected：默认选中 -->
                <option value="master">硕士</option>
            </select>
        </div>

        <!-- 2.5 多行文本控件 -->
        <div class="form-group">
            <label for="intro">个人简介：</label>
            <!-- textarea：多行文本输入框，rows（行数）、cols（列数）控制大小 -->
            <textarea id="intro" name="